<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:cc="http://java.sun.com/jsf/composite/components"
	xmlns:p="http://primefaces.org/ui">

<h:head>
	<title>Add User</title>
</h:head>

<h:body>
	<ui:composition>
		<h:outputScript library="javax.faces" name="jsf.js" target="body" />
		<div class="post">
			<h2 class="title">Add new User</h2>
			<p class="meta">&nbsp;</p>
			<div class="entry">


				<h:form id="add">

					<p:panel id="panel" header="New User">

						<p:messages id="msgs" />

						<h:panelGrid columns="3">
							<h:outputLabel for="username" value="username: *" />
							<p:inputText id="username"
								value="#{userManager.potentialUser.username}" required="true"
								label="username">
								<f:validateLength minimum="2" />
							</p:inputText>
							<p:message for="username" display="icon" />

							<h:outputLabel for="password1" value="password: *" />
							<p:password id="password1"
								value="#{userManager.potentialUser.password}" feedback="true"
								match="password2" label="password1" required="true" />
							<p:message for="password1" display="icon" />

							<h:outputLabel for="password2" value="re-input password: *" />
							<p:password id="password2"
								value="#{userManager.potentialUser.password}" feedback="true"
								label="password2" required="true" />
							<p:message for="password2" display="icon" />

							<h:outputLabel for="firstname" value="firstname: *" />
							<p:inputText id="firstname"
								value="#{userManager.potentialUser.firstname}" required="true"
								label="firstname">
								<f:validateLength minimum="2" />
							</p:inputText>
							<p:message for="firstname" display="icon" />

							<h:outputLabel for="lastname" value="lastname: *" />
							<p:inputText id="lastname"
								value="#{userManager.potentialUser.lastname}" required="true"
								label="lastname">
								<f:validateLength minimum="2" />
							</p:inputText>
							<p:message for="lastname" display="icon" />

							<h:outputLabel for="address" value="address: *" />
							<p:inputText id="address"
								value="#{userManager.potentialUser.address}" required="true"
								label="address">
								<f:validateLength minimum="2" />
							</p:inputText>
							<p:message for="address" display="icon" />

							<h:outputLabel for="state" value="state: *" />
							<p:selectOneMenu id="state"
								value="#{userManager.potentialUser.state}">
								<f:selectItem itemLabel="Select State" itemValue="" />
								<f:selectItems value="#{stateCityManager.states}" />
								<p:ajax update="city"
									listener="#{stateCityManager.handleStateChange}" />
							</p:selectOneMenu>
							<p:message for="state" display="icon" />

							<h:outputLabel for="city" value="city: *" />
							<p:selectOneMenu id="city"
								value="#{userManager.potentialUser.city}">
								<f:selectItem itemLabel="Select City" itemValue="" />
								<f:selectItems value="#{stateCityManager.cities}" />
							</p:selectOneMenu>
							<p:message for="city" display="icon" />

							<h:outputLabel for="zip" value="zip: *" />
							<p:inputText id="zip" value="#{userManager.potentialUser.zip}"
								required="true" label="zip">
								<f:validateLength minimum="2" />
							</p:inputText>
							<p:message for="zip" display="icon" />

							<h:outputLabel for="phone" value="phone: *" />
							<p:inputMask id="phone"
								value="#{userManager.potentialUser.phone}" mask="(999) 999-9999"
								required="true" label="phone" />
							<p:message for="phone" display="icon" />

							<h:outputLabel for="email" value="email: *" />
							<p:inputText id="email"
								value="#{userManager.potentialUser.email}" required="true"
								label="email">
								<f:validateLength minimum="2" />
							</p:inputText>
							<p:message for="email" display="icon" />

						</h:panelGrid>

						<p:commandButton id="btn" value="Register" ajax="false"
							action="#{userManager.createUser}" />
					</p:panel>

				</h:form>
			</div>
		</div>
	</ui:composition>
</h:body>
</html>
